<template>
	<view>
		<view class="record-rule-box flex flex-dir-col">
			<!-- 中奖记录 -->
			<image :src="$originOssUrl+'/static/cj/8.png'" style="width:58rpx;" mode="widthFix" @click="$u.route('/pages/lottery/record',{id:info.id})"></image>
			<!-- 规则 -->
			<image :src="$originOssUrl+'/static/cj/9.png'" style="width:58rpx;z-index:99999999;" mode="widthFix" @click.active="$u.route('/pages/lottery/rule',{id:info.id})"></image>
		</view>
		<view class="lottery_container">
			<!-- <image :src="$originOssUrl+'/static/cj/2.png'" mode="widthFix"></image>
			<image :src="$originOssUrl+'/static/cj/1.png'" mode="widthFix"></image>
			<image :src="$originOssUrl+'/static/cj/10.png'" mode="widthFix"></image>
			<image :src="$originOssUrl+'/static/cj/3.png'" mode="widthFix"></image>
			<image :src="$originOssUrl+'/static/cj/4.png'" mode="widthFix"></image> -->
			
			<!-- <image :src="$originOssUrl+'/static/cj/61.png'" mode="widthFix"></image>
			<image :src="$originOssUrl+'/static/cj/62.png'" mode="widthFix"></image> -->
			<!-- <view class="box" :style="{backgroundImage:`url(${$originOssUrl}/static/cj/bg.png)`}"> -->			
			
			<view class="box">
				<!-- <view class="title" :style="{backgroundImage:`url(${$originOssUrl}/static/cj/5.png)`}"> </view> -->
				<!-- 			<view class="t2" v-if="info.display_number==1">{{handleLang('当前累计参与')}} <text
						style="color: #FF0008;">{{ info.grand_total || 0 }}</text> {{handleLang('次')}}</view> -->
				<view class="con">
					<!-- 奖品球 -->
					<image :src="$originOssUrl + info.image1" mode="widthFix" class="prizeBall"></image>
					<!-- 抓手 -->
					<!-- 				<view class="tongs" :class="{'animation':isMove}">
						<image :src="$ossUrl+'/static/cj/14.png'" mode="widthFix" class="pedestal"></image>
						<image :src="$ossUrl+'/static/cj/15.png'" mode="aspectFill" class="left"
							:class="{ 'left_hand_open':isMove }"></image>
						<image :src="$ossUrl+'/static/cj/16.png'" mode="aspectFill" class="right"
							:class="{ 'right_hand_open':isMove }"></image>
					</view> -->
				</view>
				<!-- 光 -->
				<image :src="$originOssUrl+'/static/cj/17.png'" mode="aspectFill" class="light" :class="{'light_animation':isMove}"></image>
				<!-- 滚动消息 -->
				<view class="notice" v-if="info.display_lottery_log==1">
					<!-- <u-notice-bar :text="notice" direction='column' color="#222" bgColor='transparent' icon=''></u-notice-bar> -->
					<!-- <image :src="$ossUrl+'/static/cj/13.png'" mode="widthFix"></image> -->
				</view>
				<!-- 活动倒计时 -->
				<countdown v-if="activeState()=='0'" :time="new Date(info.start_time).getTime() - nowTimestamp"></countdown>
			</view>
			<!-- 控制台 -->
			<view class="control">
				<!-- 抽奖按钮 --><strong></strong>
				<view class="action">
					<view class="pan">
						<!-- <image :src="$originOssUrl+'/static/cj/11.png'" mode="widthFix"></image> -->
						<!-- 免费抽/活动状态 -->
						<view v-if="oneBtnStatus()" class="btn" :class="{'btnAction':isbtnAction}"
							@touchstart="!isStart && (isbtnAction=true)" @touchend="isStartDraw(1)">
							<image :src="$originOssUrl+`/static/cj/${getBtnText().btnbg}.png`" mode="widthFix"></image>
							<!-- <image v-if="getBtnText().isHui" :src="$originOssUrl+'/static/cj/btn-hui.png'" mode="widthFix"></image>
							<image v-else :src="$originOssUrl+'/static/cj/12.png'" mode="widthFix"></image>
							<text class="btn_text">{{ getBtnText().name }}</text> -->
						</view>
						<!-- 抽1次/5次 -->
						<view v-else class="btn_more">
							<image :src="$originOssUrl+'/static/cj/btn1.png'" mode="aspectFill"
								:class="{'btnAction':isbtn1Action}" @touchstart="!isStart && (isbtn1Action=true)"
								@touchend="isStartDraw(1)"></image>
							<image :src="$originOssUrl+'/static/cj/btn5.png'" mode="aspectFill" style="margin-left: 50rpx;"
								:class="{'btnAction':isbtn5Action}" @touchstart="!isStart && (isbtn5Action=true)"
								@touchend="isStartDraw(5)"></image>
						</view>
						<!-- <image :src="$originOssUrl+'/static/cj/63.png'" mode="widthFix"></image> -->
					</view>
				</view>
		
				<view class="num">
					<!-- 抽奖消耗藏品 -->
					<view class="xhcp" v-if="info.type==20">
						<text>{{handleLang('剩余抽取次数')}}</text>
						<text>{{ info.remaining || 0 }}</text>
					</view>
					<!-- 抽奖消耗水晶 -->
					<view class="xhsj" v-if="info.type==10">
						<view>
							<w-icon :name="crystal().icon" size="25"></w-icon>
							<text class="font-size-20 mt-8">{{ crystal().totalNum }}</text>
						</view>
						<view>
							<text class="font-size-14" style="letter-spacing: 4rpx;">{{handleLang('您可抽取次数')}}</text>
							<text class="font-size-20 mt-2">{{ info.remaining || 0 }}</text>
						</view>
					</view>
				</view>
		
				<!-- 抽奖确认弹窗 -->
				<confimPop v-model="showPop" :num="num" @confim="startDraw" :info="info" @refresh="$emit('refresh')">
				</confimPop>
				<!-- 抽奖结果弹窗 -->
				<resultPop v-model="showResultPop" :num="num" :prize="prize" @confim="again"></resultPop>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		lotteryStartApi
	} from '@/api/lottery/index.js';
	import confimPop from './confimPop.vue';
	import resultPop from './resultPop.vue';
	import countdown from './countdown.vue';
	export default {
		name: "lotteryBox",
		components: {
			confimPop,
			resultPop,
			countdown
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			...mapState('config', ['nowTimestamp']),
			notice() {
				return this.info.lotteryList.map(item => this.handleLang(item.msg))
			}
		},
		data() {
			return {
				isMove: false, // 动画
				isbtnAction: false, // 按钮效果
				isbtn1Action: false, // 按钮效果
				isbtn5Action: false, // 按钮效果
				showPop: false, // 确认弹窗
				showResultPop: false, // 抽奖结果
				num: 1, // 抽奖次数
				isStart: false, // 是否开始中
				prize: [] // 抽奖结果
			};
		},
		mounted() {
			this.createNowTimeTimer()
		},
		methods: {
			...mapActions('config', ['createNowTimeTimer']),

			// 判断是否可以抽奖
			isStartDraw(num) {

				let {
					remaining,
					free_number
				} = this.info;
				let status = this.activeState();
				this.isbtnAction = false;
				this.isbtn1Action = false;
				this.isbtn5Action = false;
				if (status == 0) {
					uni.$u.toast('暂未开始')
				} else if (status == 2) {
					uni.$u.toast('活动已结束')
				} else if (Number(remaining) <= 0) {
					uni.$u.toast('次数不足')
				} else if (this.isStart) {
					uni.$u.toast('抽奖进行中...')
				} else if (free_number > 0) {
					this.num = num;
					this.startDraw();
				} else {
					this.num = num;
					uni.showLoading()
					setTimeout(() => {
						uni.hideLoading()
						this.showPop = true;
					}, 1000)
				}
			},

			// 再抽一次
			again() {
				let {
					remaining
				} = this.info;
				let num = this.num;
				if (remaining < num) {
					uni.$u.toast('次数不足')
				} else {
					this.showResultPop = false;
					this.startDraw();
				}
			},

			// 开始抽奖
			startDraw() {
				uni.$u.throttle(() => {
					let {
						id
					} = this.info;
					uni.showLoading()
					lotteryStartApi({
						lotteryId: id,
						number: this.num
					}).then(res => {
						this.prize = res.data;
						this.info.remaining = this.info.remaining - this.num; //次数扣除
						this.crystalKC(); //水晶扣除
						this.startAnimation()
					}).catch(() => {})
				}, 1000)
			},

			// 开始动画
			startAnimation() {
				uni.showLoading({
					title: '抽奖中'
				})
				this.isStart = true;
				this.isMove = true;
				// 时间是动画的累加时间
				setTimeout(() => {
					uni.hideLoading()
					this.showResultPop = true;
					this.isMove = false;
					this.isStart = false;
					this.$emit('refresh')
				}, 1000)
			},

			// 活动状态
			activeState() {
				// status 0暂未开始 1活动进行中 2活动已结束
				let {
					start_time,
					end_time
				} = this.info;
				let status = this.$tools.checkTimeBetween(this.nowTimestamp, start_time, end_time)
				return status
			},

			// 获取按钮的状态
			getBtnText() {
				try {
					let btnType = {
						name: '',
						isHui: false,
						btnbg:''
					}
					let {
						remaining,
						free_number,
						is_consecutive_draws_1,
						is_consecutive_draws_5
					} = this.info;
					let status = this.activeState()
					switch (true) {
						case status == 0:
							btnType.name = '暂未开始'
							btnType.isHui = true
							btnType.btnbg = 'btn-12'
							break;
						case status == 2:
							btnType.name = '活动已结束'
							btnType.isHui = true
							btnType.btnbg = 'btn-10'
							break;
						case remaining == 0:
							btnType.name = '次数不足'
							btnType.isHui = true
							btnType.btnbg = 'btn-11'
							break;
						case free_number > 0:
							btnType.name = '免费抽一次'
							btnType.isHui = false
							btnType.btnbg = 'btn-1'
							break;
						case is_consecutive_draws_1 && !is_consecutive_draws_5:
							btnType.name = '抽一次'
							btnType.isHui = false
							btnType.btnbg = 'btn7'
							break;
					}
					return btnType
				} catch (err) {
					console.log(err)
					return ''
				}
			},

			// 判断按钮类型
			oneBtnStatus() {
				let {
					remaining,
					free_number,
					is_consecutive_draws_1,
					is_consecutive_draws_5
				} = this.info;
				let status = this.activeState();
				if (remaining == 0 || status == 0 || status == 2 || free_number > 0 || (is_consecutive_draws_1 && !
						is_consecutive_draws_5)) {
					return true
				} else {
					return false
				}
			},

			// 水晶扣除
			crystalKC() {
				let {
					integral_1,
					crystal,
					crystal_blue,
					crystal_purple,
					crystal_yellow,
					free_number
				} = this.info;
				let num = this.num * integral_1;
				if (free_number != 0) return;
				switch (true) {
					case crystal == '10':
						this.info.crystal_yellow = crystal_yellow - num;
						break;
					case crystal == '20':
						this.info.crystal_yellow = crystal_purple - num;
						break;
					case crystal == '30':
						this.info.crystal_yellow = crystal_blue - num;
						break;
				}
			},

			// 水晶类型
			crystal() {
				let {
					crystal,
					crystal_blue,
					crystal_purple,
					crystal_yellow
				} = this.info;
				switch (true) {
					case crystal == '10':
						return {
							icon: 'hsj', name: '黄', totalNum: crystal_yellow
						}
						break;
					case crystal == '20':
						return {
							icon: 'zsj', name: '紫', totalNum: crystal_purple
						}
						break;
					case crystal == '30':
						return {
							icon: 'lsj', name: '蓝', totalNum: crystal_blue
						}
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
	.lottery_container {
		width: 100%;
		height: 1130rpx;
		position: relative;
		@extend .flex, .flex-js-center, .pt-10;	
		
		
		>image {
			position: absolute;
			display: inline-block;
			z-index: 10;

			&:nth-child(1) {
				width: 278.44rpx;
				height: 196.05rpx;
				left: 408rpx;
				top: -132rpx;
			}

			&:nth-child(2) {
				width: 278.44rpx;
				height: 196.05rpx;
				left: 76rpx;
				top: -132rpx;
			}

			&:nth-child(3) {
				width: 80rpx;
				height: 184.33rpx;
				left: 45rpx;
				top: 120rpx;
			}

			&:nth-child(4) {
				width: 88rpx;
				height: 246rpx;
				left: 35rpx;
				top: 360rpx;
				z-index: 1;
			}

			&:nth-child(5) {
				width: 134rpx;
				height: 351rpx;
				right: 4rpx;
				top: 180rpx;
			}

			&:nth-child(6) {
				width: 58rpx;
				height: 168rpx;
				right: 8rpx;
				top: -150rpx;
			}

			&:nth-child(7) {
				width: 58rpx;
				height: 128rpx;
				right: 8rpx;
				top: 40rpx;
			}

			&:nth-child(8) {
				width: 140rpx;
				height: 159rpx;
				left: 20rpx;
				top: 660rpx;
			}

			&:nth-child(9) {
				width: 140rpx;
				height: 159rpx;
				right: 20rpx;
				top: 660rpx;
			}
		}

		>.box {
			width: 618rpx;
			height: 668rpx;
			background-size: 100% 100%;
			position: relative;
			z-index: 10;
			padding-top: 68rpx;
			@extend .flex, .flex-dir-col, .flex-ai-center;

			>.title {
				width: 378rpx;
				height: 82rpx;
				background-size: 100% 100%;
				position: absolute;
				left: 50%;
				top: -74rpx;
				transform: translateX(-50%);
				@extend .flex-center;

				// padding-bottom: 60rpx;
				>text {
					font-size: 40rpx;
					font-weight: 600;
					letter-spacing: 10rpx;
					@extend .font-color-textPrimary;
				}
			}

			>.t2 {
				// color: $text;
				width: 100%;
				letter-spacing: 4rpx;
				@extend .font-size-12, .font-color-textPrimary, .flex-center;

				>text {
					// color: #fdfdfd;
					@extend .font-color-warning, .font-w-500, .mlr-4;
				}
			}

			>.con {
				width: 582rpx;
				height: 592rpx;
				// background-image: url($IMG_URL+'/static/cj/bg1.png');
				background-size: 100% 100%;
				margin-top: 12rpx;
				overflow: hidden;
				position: relative;

				>.prizeBall {
					width: 562.77rpx;
					height: 392.77rpx;
					position: absolute;
					left: 16rpx;
					bottom: -20rpx;
				}

				>.tongs {
					width: 189rpx;
					position: absolute;
					left: 80rpx;
					top: -290rpx;
					z-index: 1;

					>.pedestal {
						width: 189rpx;
						height: 472rpx;
					}

					>.left {
						width: 30rpx;
						height: 45rpx;
						position: absolute;
						left: -12rpx;
						bottom: -20rpx;
						// bottom: -16rpx;
						z-index: -1;
						transform: rotate(-60deg);
						transform-origin: top right;
						transition: 1s;
					}

					>.right {
						width: 30rpx;
						height: 45rpx;
						position: absolute;
						right: -12rpx;
						// bottom: -16rpx;
						bottom: -20rpx;
						z-index: -1;
						transform: rotate(60deg);
						transform-origin: top left;
						transition: 1s;
					}
				}
			}

			>.light {
				width: 319rpx;
				height: 182rpx;
				position: absolute;
				right: 120rpx;
				top: 150rpx;
				transform: scale(0);
				transform-origin: top;
			}

			>.notice {
				width: 100%;
				padding: 0 80rpx;
				@extend .flex-center, .mt-8;

				>image {
					width: 52rpx;
					height: 48rpx;
				}
			}
		}

		>.control {
			width: 100%;
			height: auto;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 10;

			>.action {
				width: 100%;
				height: 250rpx;
				padding: 0 14rpx;
				// background-image: url($IMG_URL+'/static/cj/bg2.png');
				background-size: 100% 100%;
				@extend .flex-center;

				>.pan {
					width: 704rpx;
					height: 128rpx;
					// background-image: url($IMG_URL+'/static/cj/bg4.png');
					background-size: 100% 100%;
					position: relative;

					// &>image {
					// 	display: block;
					// 	position: absolute;
					// 	width: 56.99rpx;
					// 	height: 108.38rpx;
					// 	right: 0;
					// 	bottom: 0rpx;
					// }

					&>image {
						display: block;
						position: absolute;
						width: 57.11rpx;
						height: 54.91rpx;
						left: 80rpx;
						bottom: 0rpx;

						&:last-child {
							display: block;
							position: absolute;
							width: 56.99rpx;
							height: 108.38rpx;
							left: 570rpx;
							bottom: 0rpx;
						}
					}



					&>.btn {
						position: absolute;
						width: 580rpx;
						height: 118rpx;
						left: 50%;
						bottom: -40rpx;
						transition: 0.5s;
						transform: translateX(-50%);

						>image {
							width: 100%;
							height: 100%;
						}

						>.btn_text {
							width: 100%;
							text-align: center;
							font-size: 40rpx;
							font-weight: 500;
							color: #fff;
							position: absolute;
							right: 0;
							top: 20rpx;
							letter-spacing: 4rpx;
							z-index: 10;
							padding-left: 10rpx;
						}
					}

					&>.btn_more {
						position: absolute;
						// width: 460rpx;
						left: 50%;
						bottom: -40rpx;
						transform: translateX(-50%);
						@extend .flex-center-sb;

						>image {
							width: 284rpx;
							height: 118rpx;
							display: inline-block;
						}
					}
				}
			}

			>.num {
				width: 100%;
				height: 267rpx;
				background-image: url($IMG_URL+'/static/cj/bg3.png');
				background-size: 100% 100%;
				@extend .flex-center;

				>.xhcp {
					width: 676rpx;
					height: 184rpx;
					background-image: url($IMG_URL+'/static/cj/7.png');
					background-size: 654rpx 164rpx;
					background-position: center;
					// background-color: #FFE4E4;
					background-repeat: no-repeat;
					border-radius: 20rpx;
					@extend .flex, .flex-dir-col, .flex-js-center, .flex-ai-center;

					>text {
						font-size: 24rpx;
						color: #000;

						&:last-child {
							font-size: 40rpx;
							font-weight: bold;
							margin-top: 4rpx;
						}
					}
				}

				>.xhsj {
					width: 676rpx;
					height: 184rpx;
					background-image: url($IMG_URL+'/static/cj/7.png');
					background-position: center;
					background-size: 654rpx 164rpx;
					// background-color: #FFE4E4;
					background-repeat: no-repeat;
					border-radius: 20rpx;
					@extend .flex-center-sb;

					>view {
						height: 100%;
						@extend .flex, .flex-dir-col, .flex-ai-center, .flex-js-center;

						&:first-child {
							width: 40%;
							position: relative;

							&::before {
								content: '';
								width: 2rpx;
								height: 40rpx;
								background-color: #8095C9;
								position: absolute;
								right: 0;
								top: calc(50% - 20rpx);
							}
						}

						&:last-child {
							width: 60%;
						}

						>text {
							color: #222;
							font-weight: 500;
						}
					}
				}
			}
		}

		// 爪子移动
		.animation {
			animation:
				move1 1s linear forwards,
				move5 2s linear 4s forwards;
		}

		// 发光
		.light_animation {
			animation: move2 2s linear 1s;
		}

		// 触手打开
		.left_hand_open {
			animation: move3 1s linear 3s forwards;
		}

		.right_hand_open {
			animation: move4 1s linear 3s forwards;
		}

		// 按钮缩放
		.btnAction {
			transform: scale(0.8);
		}
	}

	@keyframes move1 {
		from {
			left: 80rpx;
		}

		to {
			left: 300rpx;
		}
	}

	@keyframes move2 {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(2);
		}

		100% {
			transform: scale(0);
		}
	}

	@keyframes move3 {
		from {
			transform: rotate(-60deg);
		}

		to {
			transform: rotate(0deg);
		}
	}

	@keyframes move4 {
		from {
			transform: rotate(60deg);
		}

		to {
			transform: rotate(0deg);
		}
	}

	@keyframes move5 {
		from {
			top: -290rpx;
		}

		to {
			top: 0;
		}
	}
</style>